<template>
  <component :is="as" class="rainbow-text" :class="cn('relative z-0 inline-flex', props.class)">
    <slot />
    <!-- 多彩阴影层 -->
    <span class="rainbow-shadow" :data-text="content"></span>
  </component>
</template>

<script setup lang="ts">
import { cn } from '@/lib/utils'
import { useSlots, type VNode } from 'vue'

interface LineShadowTextProps {
  as?: keyof HTMLElement
  class?: string
  rainbow?: boolean // 新增：是否启用彩虹效果
}

const props = withDefaults(defineProps<LineShadowTextProps>(), {
  as: 'span' as keyof HTMLElement,
  rainbow: false,
})

const slots = useSlots() as Record<string, () => VNode[]>
const children = slots?.default ? slots.default()[0]?.children : null

const content = typeof children === 'string' ? children : null

if (!content) {
  throw new Error('LineShadowText only accepts string content')
}
</script>

<style scoped>
.rainbow-text {
  position: relative;
  display: inline-block;
  font-weight: 700;
  background: linear-gradient(45deg, #ff0000, #ff9900, #33cc33, #3399ff, #cc33ff);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow 3s ease-in-out infinite;
}

.rainbow-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ff0000, #ff9900, #33cc33, #3399ff, #cc33ff);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.5;
  filter: blur(5px);
  z-index: -1;
  animation: rainbow 3s ease-in-out infinite reverse;
}

@keyframes rainbow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>
